<template>
  <q-page class="flex flex-center bg-white">
    <div class="row items-center justify-center full-width" style="max-width: 1200px">
      <!-- SVG插画区域 -->
      <div class="col-md-6 col-sm-12 q-pa-md">
        <div class="error-illustration">
          <svg class="error-svg" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg">
            <!-- 背景 -->
            <rect width="600" height="400" fill="#f8f9fa" rx="20" />

            <!-- 漂浮云朵 -->
            <g v-for="(cloud, index) in clouds" :key="index" :class="cloud.class">
              <path :d="cloud.path" fill="#e9ecef" :style="{ transform: cloud.transform }" />
            </g>

            <!-- 404数字 -->
            <g class="error-numbers">
              <path
                d="M100,100 L100,300 L200,300 L200,100 Z"
                fill="none"
                stroke="#dc3545"
                stroke-width="12"
              />
              <circle cx="150" cy="200" r="50" fill="none" stroke="#dc3545" stroke-width="12" />
              <path
                d="M250,100 L350,100 L350,300 L250,300 Z"
                fill="none"
                stroke="#dc3545"
                stroke-width="12"
              />
              <path
                d="M400,100 L400,300 L500,300 L500,100 Z"
                fill="none"
                stroke="#dc3545"
                stroke-width="12"
              />
            </g>

            <!-- 小火箭 -->
            <g class="rocket" transform="translate(300, 200)">
              <path d="M0,-20 L20,20 L-20,20 Z" fill="#6c757d" />
              <rect x="-10" y="20" width="20" height="40" fill="#343a40" />
              <circle cx="0" cy="50" r="5" fill="#dc3545" />
              <path d="M-15,30 L-25,40 M15,30 L25,40" stroke="#6c757d" stroke-width="3" />
            </g>
          </svg>
        </div>
      </div>

      <!-- 文字区域 -->
      <div class="col-md-6 col-sm-12 q-pa-md text-center text-md-left">
        <transition-group name="fade-up">
          <div key="title" class="text-h2 text-primary q-mb-sm">页面失踪了!</div>
          <div key="subtitle" class="text-h5 text-weight-bold q-mb-sm">
            {{ message }}
          </div>
          <div key="desc" class="text-body1 text-grey q-mb-md">
            我们似乎找不到您要访问的页面。可能是URL输入错误，或者页面已被移动。您可以检查拼写或返回我们的主页。
          </div>
          <div key="actions" class="action-buttons">
            <q-btn
              to="/index"
              label="返回首页"
              color="primary"
              no-caps
              class="q-px-xl q-mr-sm"
              icon="home"
            />
            <q-btn
              @click="$router.go(-1)"
              label="返回上一页"
              color="secondary"
              no-caps
              class="q-px-xl"
              icon="arrow_back"
            />
          </div>
        </transition-group>
      </div>
    </div>
  </q-page>
</template>

<script setup>
import { ref, computed } from 'vue'

const message = computed(() => {
  const hours = new Date().getHours()
  return hours < 12
    ? '早上好，页面走丢了!'
    : hours < 18
      ? '下午好，页面不见了!'
      : '晚上好，页面消失了!'
})

const clouds = ref([
  {
    class: 'cloud-1',
    path: 'M30,50 Q40,40 50,50 Q60,60 50,70 Q40,80 30,70 Q20,60 30,50 Z',
    transform: 'translate(0,0)',
  },
  {
    class: 'cloud-2',
    path: 'M100,80 Q110,70 120,80 Q130,90 120,100 Q110,110 100,100 Q90,90 100,80 Z',
    transform: 'translate(0,0)',
  },
  {
    class: 'cloud-3',
    path: 'M450,60 Q460,50 470,60 Q480,70 470,80 Q460,90 450,80 Q440,70 450,60 Z',
    transform: 'translate(0,0)',
  },
])
</script>

<style lang="scss" scoped>
.error-illustration {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;

  .error-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));

    .error-numbers {
      animation: float 6s ease-in-out infinite;
      transform-origin: center;
    }

    .rocket {
      animation:
        rocketFloat 8s ease-in-out infinite,
        rocketFire 0.5s alternate infinite;
      transform-origin: center;
    }

    .cloud-1 {
      animation: cloudMove1 15s linear infinite;
    }

    .cloud-2 {
      animation: cloudMove2 20s linear infinite;
    }

    .cloud-3 {
      animation: cloudMove3 25s linear infinite;
    }
  }
}

.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;

  @media (min-width: $breakpoint-sm-min) {
    justify-content: flex-start;
  }
}

// 动画定义
@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(2deg);
  }
}

@keyframes rocketFloat {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(-10px, -15px) rotate(-5deg);
  }
  50% {
    transform: translate(0, -20px) rotate(0deg);
  }
  75% {
    transform: translate(10px, -15px) rotate(5deg);
  }
}

@keyframes rocketFire {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05);
  }
}

@keyframes cloudMove1 {
  0% {
    transform: translateX(-50px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateX(600px);
    opacity: 0;
  }
}

@keyframes cloudMove2 {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateX(700px);
    opacity: 0;
  }
}

@keyframes cloudMove3 {
  0% {
    transform: translateX(-150px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateX(750px);
    opacity: 0;
  }
}

// 文字动画
.fade-up-enter-active,
.fade-up-leave-active {
  transition: all 0.5s ease;
}

.fade-up-enter-from,
.fade-up-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

.fade-up-move {
  transition: transform 0.5s ease;
}

// 响应式调整
@media (max-width: $breakpoint-sm-max) {
  .error-illustration {
    height: 300px;
    margin-bottom: 30px;
  }

  .action-buttons {
    flex-direction: column;
    align-items: center;

    .q-btn {
      width: 100%;
      margin-bottom: 10px;
    }
  }
}
</style>
